<template>
 <div style="background-color: #eee;height: 100%;">
  <!-- 头像 拉起本地相册 -->
    <van-cell size="large" title="头像">
      <!-- <img src="/fms/api/show/b60c9ce9-8484-46c3-8380-98cb8510969f_0/teacher.png" alt=""> -->
      <template #right-icon>
        <!-- <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> -->
        <img style="width: 20px; height: 20px;" src="../../assets/img/myProfile/logo2.png" alt="">
      </template>
    </van-cell>
    <!--用户名 不可以修改 -->
    <van-cell size="large" title="用户名" is-link :value="detailData.name&&detailData.name"></van-cell>
    <!-- 专家职称 本地写死上拉框选择 -->
    <van-cell size="large" title="专家职称" is-link :value="detailData.expertTitle && detailData.expertTitle.title" @click='expertLeaveShow=true'></van-cell>
    <!-- 擅长领域 本地写死上拉框选择 -->
    <van-cell size="large" title="擅长领域" is-link :value="detailData.types&&detailData.typeNames" @click='expertSChangShow=true'></van-cell>
    <!--个人简介 跳转修改 -->
    <van-cell size="large" title="个人简介" is-link :value="detailData.expertIntroduce" @click='goToEdit("个人简介")' ></van-cell>
    <!-- 生日 本地上拉框 -->
    <van-cell size="large" title="出生日期" is-link :value="detailData.birthday" @click='birDayShow=true'></van-cell>
    <!-- 工作地址 下拉本地选择 -->
    <van-cell ref="addressRef" size="large" title="工作地址" is-link :value="pro +  city +  county" @click='addressShow=true'></van-cell>
    <!-- 详细地址 跳转编辑 -->
    <van-cell size="large" title="详细地址" is-link :value="detailData.address" @click='goToEdit("详细地址")'></van-cell>
    <!-- 工作单位 跳转编辑 -->
    <van-cell size="large" title="工作单位" is-link :value="detailData.workUnit" @click='goToEdit("工作单位")'></van-cell>
    <!-- 个人成就 跳转编辑 -->
    <van-cell size="large" title="个人成就" is-link :value="detailData.achievement" @click='goToEdit("个人成就")'></van-cell>
    <!-- 身份证 跳转编辑-->
    <van-cell size="large" title="身份证号码" is-link :value="detailData.idCardNum" @click='goToEdit("身份证号码")'></van-cell>

    <!-- 专家职称 下拉选择 -->
    <van-popup v-model="expertLeaveShow" position="bottom">
      <van-picker
        title="职称"
        show-toolbar
        :columns="expertLeave"
        @confirm="expertConfirm"
        @cancel="expertLeaveShow=false"
      />
    </van-popup>
    <!-- 擅长领域 下拉选择 -->
    <van-popup v-model="expertSChangShow" position="bottom">

        <div class="head">
        <span @click="expertSChangShow = false">取消</span>
        <p>选择擅长领域</p>
        <span @click="expertSChangConfirm">确定</span>
      </div>
      <div class="places">
        <div class="place_item" v-for="(item, index) in shanChang" :key="item.value" @click="toggle(index)">
          <span>{{ item.label }}</span>
          <van-checkbox checked-color="#37b5b5" v-model="item.check" shape="square"></van-checkbox>
        </div>
      </div>
      <!-- <van-picker
        title="职称"
        show-toolbar
        :columns="shanChang"
        @confirm="expertSChangConfirm"
        @cancel="expertSChangShow=false"
      /> -->
    </van-popup>
    <!-- 生日 下拉选择 -->
    <van-popup v-model="birDayShow" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="birdayConfirm"
        @cancel="birDayShow=false"
      />
    </van-popup>
    <!-- 地址选择器 -->
    <van-popup v-model="addressShow" position="bottom">
      <van-area
        title="选择地区"
        :area-list="areaList"
        @confirm="areaConfirm"
        @cancel="addressShow=false"
      />
    </van-popup>
 </div>
</template>

<script>
import { Cell, CellGroup, Icon, Popup, Picker, DatetimePicker, Area, Checkbox, CheckboxGroup } from 'vant'
import { getValue, setValue, setObject, clear } from '@/utils/auth'
import { postHandle, getHandle } from '@/api'
import dayjs from 'dayjs'
export default {
  name: '',
  data() {
    return {
      minDate: new Date(1920, 0 , 1),
      maxDate: new Date(2032, 11, 31),
    //  详情数据
      detailData: {},
      // 专家职称数据列表
      expertLeave: [],
      expertLeaveID: [],
      // 擅长领域数据列表
      shanChang: [],
      shanChangID: [],
      expertLeaveShow: false,
      expertSChangShow: false,
      birDayShow: false,
      currentDate: new Date(),
      addressShow: false,
      updataData: {
      },
      areaList: {
        province_list: {
          110000: '北京市',
          120000: '天津市'
        },
        city_list: {
          110100: '北京市',
          120100: '天津市'
        },
        county_list: {
          110101: '东城区',
          110102: '西城区'
        }
      }
    }
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [DatetimePicker.name]: DatetimePicker,
    [Area.name]: Area
  },
  async created() {
    // 专家信息详情
    await this.getDetailData()

    // 专家擅长列表
    await this.getShanChang()
    // 专家职称列表
    this.getExpertLeave()
    // 省市区级联数据
    this.getSSQData()
    this.$bridge.register('refresh', async data => {
      // 专家信息详情
      await this.getDetailData()
      // 专家职称列表
      await this.getExpertLeave()
      // 专家擅长列表
      await this.getShanChang()
      // 省市区级联数据
      this.getSSQData()
    })
  },
  mounted() {
  },
  computed: {
    pro() {
      const a = this.detailData && this.detailData.province && this.detailData.province.name || ''
      if (a) {
        return a + '-'
      }
      return ''
    },
    city() {
      const a = this.detailData && this.detailData.city && this.detailData.city.name || ''
      if (a) {
        return a + '-'
      }
      return ''
    },
    county() {
      return this.detailData && this.detailData.county && this.detailData.county.name || ''
    }
  },
  methods: {
    // 请求省市区级联数据
    getSSQData() {
      getHandle('/agri/api/common/regionManage/query4Vant').then(res => {
        this.areaList = res.data
      })
    },
    // 跳转编辑
    goToEdit(flag) {
      // 缓存本地数据
      setValue('expert-obj', JSON.stringify(this.detailData))
      // 缓存标志位 标明从哪里跳入编辑页, 用来跳转之后回显
      setValue('expert-flag', flag)
      this.$bridge.call('myProfile_edit')
    },
    // 修改接口
    updateInfo() {
      postHandle('/agri/api/common/subjectInfoExpert/update4App', {
        ...this.updataData,
        userId: getValue('loginUserId')
      }).then(res => {
        // this.$toast('修改成功')
        // 调列表接口刷新列表
        console.log(111111111)
        this.getDetailData()
      })
    },
    // 当前用户的详细信息(专家)
    async getDetailData() {
      await getHandle('/agri/api/common/subjectInfoExpert/queryDetailByUserId', {
        userId: getValue('loginUserId')
      }).then(res => {
        this.detailData = res.data
      })
    },
    // 专家职称所有分类
    getExpertLeave() {
      getHandle('/agri/api/sshfw/expertTitle/queryList', { pCode: 'T000010_EXPORT' }).then(res => {
        this.expertLeave = []
        this.expertLeaveID = []
        res.data.rows.forEach(item => {
          this.expertLeave.push(item.title)
          this.expertLeaveID.push(item.id)
        })
      })
    },
    // 擅长领域
    async getShanChang() {
      await getHandle('/agri/api/common/businessData/queryList4Amis?pCode=T000010_BIZ_EXPERT_TYPE').then(res => {
        res.data.options.forEach(item => {
          item.check = false
          this.shanChang.push(item)
          // this.shanChangID.push(item.value)
        })
        this.shanChang.forEach(ele => {
          this.detailData.types.forEach(ele2 => {
            if (ele.value === ele2.code) {
              ele.check = true
            }
          })
        })
      })
    },
    // 专家职称确定
    expertConfirm(val) {
      this.detailData.expertTitle.title = val
      this.detailData.expertTitle.id = this.expertLeaveID[this.expertLeave.indexOf(val)]
      this.expertLeaveShow = false
      // 调一次修改接口
      // 修改成功再调一次列表接口
      this.updataData = {}
      this.updataData.expertTitleId = this.detailData.expertTitle.id
      this.updateInfo()
    },
    // 专家擅长领域确定
    expertSChangConfirm(val) {
      // this.detailData.types[0].name = val
      // this.detailData.types[0].code = this.shanChangID[this.shanChang.indexOf(val)]
      // 调一次修改接口
      // 修改成功再调一次列表接口
      this.updataData = {}
      this.updataData.typeCodes = this.shanChang.filter(item => item.check).map(item => item.value).join(',')
      this.updateInfo()
      this.expertSChangShow = false
    },
    // 出生日期确定
    birdayConfirm(val) {
      this.detailData.birthday = dayjs(val).format('YYYY-MM-DD')
      this.birDayShow = false
      // 调一次修改接口
      // 修改成功再调一次列表接口
      this.updataData = {}
      this.updataData.birthday = this.detailData.birthday
      this.updateInfo()
    },
    toggle(index) {
      this.shanChang[index].check = !this.shanChang[index].check
    },
    // 省市区确定
    areaConfirm(val) {
      // 用来选择回显
      // 用来选择回显
      const provinceName = val[0].name
      const cityName = val[1].name
      const countyName = val[2].name
      this.$refs.addressRef.value = provinceName + cityName + countyName
      this.addressShow = false
      // 调一次修改接口
      // 修改成功再调一次列表接口
      this.updataData = {}
      this.updataData.provinceCode = val[0].code
      this.updataData.cityCode = val[1].code
      this.updataData.countyCode = val[2].code
      this.updateInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  padding: 15px 16px;
  box-sizing: border-box;
  justify-content: space-between;
  font-size: 15px;
  border-bottom: 1px solid #e9e9e9;
  span {
    color: #37b5b5;
  }
  span:first-child {
    color: #969799;
  }
  p {
    color: #666666;
  }
}
.places {
  padding: 0 16px;
  box-sizing: border-box;
  .place_item {
    border-bottom: 1px solid #e9e9e9;
    padding: 15px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
